<template>
  <div>
    <div class="d-flex justify-content-between">
      <h4 style="font-size: 1.142857rem">大数据查询</h4>
    </div>
    <div :style="{ height: `${height}px`, overflowY: 'auto' }">
      <ul class="list-unstyled">
        <li>
          <div class="search-item" @click="projectSearchVisible = true">
            <div class="search-item-title">
              <i class="fa fa-fw fa-list-ul mr-3 text-success"></i>
              <span>项目查询</span>
            </div>
            <span class="text-muted">
              查询
              <i class="fa fa-angle-right"></i>
            </span>
          </div>
        </li>
        <li>
          <div class="search-item" @click="showMarketDialog">
            <div class="search-item-title">
              <i class="fa fa-fw fa-line-chart mr-3 text-info"></i>
              <span>行情查询</span>
            </div>
            <span class="text-muted">
              查询
              <i class="fa fa-angle-right"></i>
            </span>
          </div>
        </li>
        <li>
          <div class="search-item" @click="searchVisible = true">
            <div class="search-item-title">
              <i class="fa fa-fw fa-user-times mr-3 text-danger"></i>
              <span>禁入查询</span>
            </div>
            <span class="text-muted">
              查询
              <i class="fa fa-angle-right"></i>
            </span>
          </div>
        </li>
        <li>
          <div class="search-item mb-0" @click="reportVisible = true">
            <div class="search-item-title">
              <i class="fa fa-fw fa-file-text-o mr-3 text-warning"></i>
              <span>产业报告</span>
            </div>
            <span class="text-muted">
              查询
              <i class="fa fa-angle-right"></i>
            </span>
          </div>
        </li>
      </ul>
    </div>

    <el-dialog
      :visible.sync="marketVisible"
      :close-on-click-modal="false"
      append-to-body
      class="dialog-sm"
      top="30px"
      width="80%"
    >
      <market-chart ref="marketChartRef"></market-chart>
    </el-dialog>

    <project-search-dialog :visible.sync="projectSearchVisible"></project-search-dialog>

    <!-- 禁入查询 -->
    <panel-search-dialog :visible.sync="searchVisible"></panel-search-dialog>

    <!-- 产业报告 -->
    <panel-product-report :visible.sync="reportVisible"></panel-product-report>
  </div>
</template>
<script>
import MarketChart from '@/credit/views/city/analy/Market'
import ProjectSearchDialog from '@/gov/views/index/ProjectSearchDialog'
import PanelSearchDialog from '@/credit/views/city/index/PanelSearchDialog'
import PanelProductReport from '@/gov/views/index/PanelProductReport'
export default {
  components: {
    MarketChart,
    ProjectSearchDialog,
    PanelSearchDialog,
    PanelProductReport,
  },
  props: {
    height: {
      type: Number,
      default: 300,
    },
  },
  data() {
    return {
      marketVisible: false,
      projectSearchVisible: false,
      searchVisible: false,
      reportVisible: false,
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    showMarketDialog() {
      this.marketVisible = true
    },
    resizeMarketReisze() {
      this.$nextTick(() => {
        const { marketChartRef } = this.$refs
        marketChartRef && marketChartRef.resize()
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.search-item {
  display: flex;
  padding: 1rem;
  background-color: #f2f2f2;
  border-radius: 0.15rem;
  margin-bottom: 0.875rem;
  border: 1px solid #f2f2f2;
  align-items: center;
  justify-content: space-between;
  transition: all 0.3s;
  cursor: pointer;

  &:hover {
    background-color: #fff;
    border-color: $primary;
    border-color: var(--primary);
  }

  .search-item-title {
    font-size: 1.2rem;
    font-weight: bold;
    color: #666;
  }
}
</style>
